---
{
	"title": "Filter",
	"language": "en",
	"category": "Plugins",
	"description": "Filters through content and only show content that match a certain keyword.",
	"tag": "filter",
	"parentdir": "filter",
	"altLangPrefix": "filter",
	"dateModified": "2025-08-07",
	"gcds": true
}
---
<div class="wb-prettify all-pre hide"></div>
<ul>
	<li><a href="#flt-section">Filtering items in sections</a></li>
	<li><a href="#flt-list">List filtering</a></li>
	<li><a href="#flt-table">Table filtering</a></li>
	<li><a href="#flt-search">Applying additional search filters</a></li>
	<li><a href="#flt-uicontainer">Move UI to specific container</a></li>
	<li><a href="#flt-customui">Custom UI</a></li>
	<li><a href="#flt-customui">Custom UI and Data JSON</a></li>
	<li><a href="#flt-gcdsCard">GCDS Card</a></li>
</ul>

<h2 id="flt-section">Filtering items in sections</h2>
<div class="wb-filter">
	<section id="survey-a">
		<h3><span class="wb-inv">Surveys starting with the letter </span>A</h3>

		<ul class="list-unstyled">
			<li>Accommodation Services, Annual Survey of Service Industries</li>
			<li>Accounting Services, Annual Survey of Service Industries</li>
			<li>Accounting Services Price Index</li>
			<li>Advertising and Related Services, Annual Survey of Service Industries</li>
			<li>Agriculture Frame Update Survey (AFUS)</li>
			<li>Agriculture Water Survey</li>
			<li>Air Carrier Operations in Canada Quarterly Survey</li>
			<li>Air Passenger Origin and Destination - Domestic Journeys</li>
			<li>Air Passenger Origin and Destination, Canada-<abbr title="United States of America">U.S.A.</abbr></li>
			<li>Airport Activity Survey</li>
			<li>Amusement and Recreation, Annual Survey of Service Industries</li>
			<li>Apartment Building Construction Price</li>
			<li>Architectural, engineering and related services price index (AESPI)</li>
			<li>Architectural Services, Annual Survey of Service Industries</li>
			<li>Asphalt Roofing</li>
			<li>Automotive Equipment Rental and Leasing, Annual Survey of Service Industries</li>
		</ul>
	</section>

	<section id="survey-b">
		<h3><span class="wb-inv">Surveys starting with the letter </span>B</h3>

		<ul class="list-unstyled">
			<li>Building Permits Survey</li>
			<li>Business Payrolls Survey</li>
			<li>Business Register</li>
		</ul>
	</section>

	<section id="survey-c">
		<h3><span class="wb-inv">Surveys starting with the letter </span>C</h3>

		<ul class="list-unstyled">
			<li>Canada's Balance of International Payments</li>
			<li>Canada's International Investment Position</li>
			<li>Canada's International Transactions in Securities</li>
			<li>Canada's International Transactions in Services</li>
			<li>Canadian Community Health Survey &ndash; Annual Component</li>
			<li>Canadian Foreign Post Indexes</li>
			<li>Canadian Government Finance Statistics (CGFS)</li>
			<li>Canadian Health Measures Survey</li>
			<li>Canadian Health Survey on Children and Youth</li>
			<li>Capital and Repair Expenditures Survey, Annual: Actual, Preliminary Actual and Intentions (CAPEX)</li>
			<li>Capital Expenditures: Oil and Gas Activities, Quarterly Survey of</li>
			<li>Cement Survey</li>
			<li>Census of Agriculture</li>
			<li>Coal Supply and Disposition Survey, Monthly</li>
			<li>Commercial and Industrial Machinery and Equipment Rental and Leasing, Annual Survey of Service Industries</li>
			<li>Commercial and Industrial Machinery and Equipment Rental and Leasing Services Price Index</li>
			<li>Commercial Stocks for Major Special Crops, Survey of</li>
			<li>Commercial Stocks of Corn and Soybeans, Survey of</li>
			<li>Consulting Services, Annual Survey of Service Industries</li>
			<li>Consulting Services Price Index</li>
			<li>Consumer Goods Rental, Annual Survey of Service Industries</li>
			<li>Consumer Price Index (Prices of Prescribed Drugs, Brand Name and Generic)</li>
			<li>Control and Sale of Alcoholic Beverages in Canada</li>
			<li>Couriers and Messengers Services Price Index</li>
		</ul>
	</section>

	<section id="survey-d">
		<h3><span class="wb-inv">Surveys starting with the letter </span>D</h3>

		<ul class="list-unstyled">
			<li>Dairy Factory Production and Stocks</li>
			<li>Database, Directory and Specialty Publishers, Annual Survey of Service Industries</li>
		</ul>
	</section>

	<section id="survey-e">
		<h3><span class="wb-inv">Surveys starting with the letter </span>E</h3>

		<ul class="list-unstyled">
			<li>Electric Power Thermal Generating Station Fuel Consumption, Annual Survey of</li>
			<li>Electricity Supply and Disposition Survey, Monthly</li>
			<li>Employment Insurance Coverage Survey</li>
			<li>Employment, Payrolls and Hours, Survey of (SEPH)</li>
			<li>Employment Services, Annual Survey of Service Industries</li>
			<li>Energy Research and Development Expenditures by Area of Technology</li>
			<li>Engineering Services, Annual Survey of Service Industries</li>
			<li>Environmental Goods and Services, Survey of</li>
			<li>Estimates of Trusteed Pension Fund, Quarterly</li>
			<li>Export Import Price Report</li>
		</ul>
	</section>

	<section id="survey-f">
		<h3><span class="wb-inv">Surveys starting with the letter </span>F</h3>

		<ul class="list-unstyled">
			<li>Fare Basis Survey</li>
			<li>Federal Government Expenditures in Support of Education (FEDEX), Survey of</li>
			<li>Federal Patents, Licences and Royalties Survey</li>
			<li>Federal Science Expenditures and Personnel, Activities in the Social Sciences and Natural Sciences</li>
			<li>Feed Grain Purchases</li>
			<li>Field Crop Reporting Series</li>
			<li>Film and Video Distribution, Survey of Service Industries</li>
			<li>Film, Television and Video Post-production, Survey of Service Industries</li>
			<li>Film, Television and Video Production, Survey of Service Industries</li>
			<li>Financial Information of Community Colleges and Vocational Schools (FINCOL)</li>
			<li>Financial Information of Universities and Colleges (FIUC)</li>
			<li>Financial Security, Survey of</li>
			<li>Financial Statements, Quarterly Survey of (QSFS)</li>
			<li>Food Services and Drinking Places, Annual Survey of Service Industries</li>
			<li>Food Services and Drinking Places, Monthly Survey of</li>
			<li>For-hire Motor Carrier Freight Services Price Index</li>
			<li>Freight Rail Services Price Index (FRSPI)</li>
			<li>Frozen and Chilled Meats, Quarterly Stocks Survey</li>
		</ul>
	</section>

	<section id="survey-g">
		<h3><span class="wb-inv">Surveys starting with the letter </span>G</h3>

		<ul class="list-unstyled">
			<li>Gasoline and Other Petroleum Fuels Sold</li>
			<li>General Social Survey &ndash; Canadians at Work and Home</li>
		</ul>
	</section>

	<section id="survey-h">
		<h3><span class="wb-inv">Surveys starting with the letter </span>H</h3>

		<ul class="list-unstyled">
			<li>Head Office Survey, Annual</li>
			<li>Homicide Survey</li>
			<li>Household Spending, Survey of (SHS)</li>
		</ul>
	</section>

	<section id="survey-i">
		<h3><span class="wb-inv">Surveys starting with the letter </span>I</h3>

		<ul class="list-unstyled">
			<li>Industrial Water Survey</li>
			<li>Informatics Professional Services Price Index</li>
			<li>International Price and Cost Survey</li>
			<li>International Travel Survey</li>
			<li>Inventory Statement of Butter and Cheese</li>
		</ul>
	</section>

	<section id="survey-j">
		<h3><span class="wb-inv">Surveys starting with the letter </span>J</h3>

		<ul class="list-unstyled">
			<li>Job Vacancy and Wage Survey</li>
		</ul>
	</section>

	<section id="survey-l">
		<h3><span class="wb-inv">Surveys starting with the letter </span>L</h3>

		<ul class="list-unstyled">
			<li>Labour Force Survey (LFS)</li>
			<li>Large Retailers, Monthly Survey of</li>
		</ul>
	</section>

	<section id="survey-m">
		<h3><span class="wb-inv">Surveys starting with the letter </span>M</h3>

		<ul class="list-unstyled">
			<li>Major Air Carriers Key Financial and Operating Statistics Monthly Survey</li>
			<li>Manufacturing, Monthly Survey of</li>
			<li>Manufacturing and Logging Industries, Annual Survey of (ASML)</li>
		</ul>
	</section>

	<section id="survey-n">
		<h3><span class="wb-inv">Surveys starting with the letter </span>N</h3>

		<ul class="list-unstyled">
			<li>Natural Gas Distribution Survey, Monthly</li>
			<li>Natural Gas Transmission Survey, Monthly</li>
			<li>New Condominium Apartment Price Report (NCAPR)</li>
			<li>New Housing Price Index (NHPI)</li>
			<li>Non-residential Building Construction Price Index (NRBCPI)</li>
		</ul>
	</section>

	<section id="survey-o">
		<h3><span class="wb-inv">Surveys starting with the letter </span>O</h3>

		<ul class="list-unstyled">
			<li>Official Languages Demand for Services Survey</li>
			<li>Oil and Other Liquid Petroleum Products Pipeline Survey, Monthly</li>
		</ul>
	</section>

	<section id="survey-p">
		<h3><span class="wb-inv">Surveys starting with the letter </span>P</h3>

		<ul class="list-unstyled">
			<li>Passenger Bus and Urban Transit Survey, Annual</li>
			<li>Passenger Bus and Urban Transit Survey, Monthly</li>
			<li>Pension Plans in Canada</li>
			<li>Periodical Publishers, Survey of Service Industries</li>
			<li>Postsecondary Student Information System</li>
			<li>Production and Disposition of Tobacco Products</li>
			<li>Purchasing Power Parities</li>
		</ul>
	</section>

	<section id="survey-r">
		<h3><span class="wb-inv">Surveys starting with the letter </span>R</h3>

		<ul class="list-unstyled">
			<li>Railway &ndash; Annual Report</li>
			<li>Real Estate Agents, Brokers, Appraisers and Other Real Estate Activities, Annual Survey of Service Industries</li>
			<li>Real Estate Rental and Leasing and Property Management, Annual Survey of Service Industries</li>
			<li>Refined Petroleum Products, Monthly</li>
			<li>Repair and Maintenance Services, Annual Survey of Service Industries</li>
			<li>Research and Development in Canadian Industry, Annual Survey of</li>
			<li>Research and Development of Canadian Private Non-Profit Organizations</li>
			<li>Retail Non-store Survey, Annual</li>
			<li>Retail Services Price Index (RSPI)</li>
			<li>Retail Trade Survey, Annual</li>
			<li>Retail Trade Survey, Monthly</li>
			<li>Retail Trade Survey (Department Store Organizations), Monthly</li>
		</ul>
	</section>

	<section id="survey-s">
		<h3><span class="wb-inv">Surveys starting with the letter </span>S</h3>

		<ul class="list-unstyled">
			<li>Sawmills</li>
			<li>Services Indicators Survey, Quarterly</li>
			<li>Software Development and Computer Services, Annual Survey of Service Industries</li>
			<li>Sound Recording and Music Publishing, Survey of Service Industries</li>
			<li>Specialized Design, Annual Survey of Service Industries</li>
			<li>Spectator Sports, Event Promoters, Artists and Related Industries, Annual Survey of Service Industries</li>
			<li>Suppliers of Business Financing, Biannual Survey of</li>
			<li>Survey Skills Development course</li>
			<li>Surveying and Mapping, Annual Survey of Service Industries</li>
		</ul>
	</section>

	<section id="survey-t">
		<h3><span class="wb-inv">Surveys starting with the letter </span>T</h3>

		<ul class="list-unstyled">
			<li>Telecommunications, Quarterly Survey of</li>
			<li>Travel Arrangement Services, Annual Survey of Service Industries</li>
			<li>Travel Survey of Residents of Canada</li>
			<li>Trucking Commodity Origin and Destination Survey</li>
		</ul>
	</section>

	<section id="survey-u">
		<h3><span class="wb-inv">Surveys starting with the letter </span>U</h3>

		<ul class="list-unstyled">
			<li>Uniform Crime Reporting Survey</li>
		</ul>
	</section>

	<section id="survey-w">
		<h3><span class="wb-inv">Surveys starting with the letter </span>W</h3>

		<ul class="list-unstyled">
			<li>Wholesale Services Price Index</li>
			<li>Wholesale Trade Survey, Annual</li>
			<li>Wholesale Trade Survey, Monthly</li>
		</ul>
	</section>
</div>

<h3>Source code</h3>
<pre><code>&lt;div class=&quot;wb-filter&quot;&gt;
	&lt;section id=&quot;survey-a&quot;&gt;
		&lt;h3&gt;&lt;span class=&quot;wb-inv&quot;&gt;Surveys starting with the letter &lt;/span&gt;A&lt;/h3&gt;

		&lt;ul class=&quot;list-unstyled&quot;&gt;
			&lt;li&gt;Accommodation Services, Annual Survey of Service Industries&lt;/li&gt;
			&lt;li&gt;Accounting Services, Annual Survey of Service Industries&lt;/li&gt;
			&lt;li&gt;Accounting Services Price Index&lt;/li&gt;
			&lt;li&gt;Advertising and Related Services, Annual Survey of Service Industries&lt;/li&gt;
			&lt;li&gt;Agriculture Frame Update Survey (AFUS)&lt;/li&gt;
			&lt;li&gt;Agriculture Water Survey&lt;/li&gt;
			&lt;li&gt;Air Carrier Operations in Canada Quarterly Survey&lt;/li&gt;
			&lt;li&gt;Air Passenger Origin and Destination - Domestic Journeys&lt;/li&gt;
			&lt;li&gt;Air Passenger Origin and Destination, Canada-&lt;abbr title=&quot;United States of America&quot;&gt;U.S.A.&lt;/abbr&gt;&lt;/li&gt;
			&lt;li&gt;Airport Activity Survey&lt;/li&gt;
			&lt;li&gt;Amusement and Recreation, Annual Survey of Service Industries&lt;/li&gt;
			&lt;li&gt;Apartment Building Construction Price&lt;/li&gt;
			&lt;li&gt;Architectural, engineering and related services price index (AESPI)&lt;/li&gt;
			&lt;li&gt;Architectural Services, Annual Survey of Service Industries&lt;/li&gt;
			&lt;li&gt;Asphalt Roofing&lt;/li&gt;
			&lt;li&gt;Automotive Equipment Rental and Leasing, Annual Survey of Service Industries&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/section&gt;

	&lt;section id=&quot;survey-b&quot;&gt;
		&lt;h3&gt;&lt;span class=&quot;wb-inv&quot;&gt;Surveys starting with the letter &lt;/span&gt;B&lt;/h3&gt;

		&lt;ul class=&quot;list-unstyled&quot;&gt;
			&lt;li&gt;Building Permits Survey&lt;/li&gt;
			&lt;li&gt;Business Payrolls Survey&lt;/li&gt;
			&lt;li&gt;Business Register&lt;/li&gt;
		&lt;/ul&gt;
	&lt;/section&gt;
	...
&lt;/div&gt;</code></pre>

<h2 id="flt-list">List filtering</h2>
<ul class="wb-filter">
	<li>Alberta</li>
	<li>British Columbia</li>
	<li>Manitoba</li>
	<li>New Brunswick</li>
	<li>Newfoundland &amp; Labrador</li>
	<li>Northwest Territories</li>
	<li>Nova Scotia</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Prince Edward Island</li>
	<li>Quebec</li>
	<li>Saskatchewan</li>
	<li>Yukon</li>
</ul>

<h3>Source code</h3>
<pre><code>&lt;ul class=&quot;wb-filter&quot;&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	&lt;li&gt;British Columbia&lt;/li&gt;
	&lt;li&gt;Manitoba&lt;/li&gt;
	&lt;li&gt;New Brunswick&lt;/li&gt;
	&lt;li&gt;Newfoundland &amp; Labrador&lt;/li&gt;
	&lt;li&gt;Northwest Territories&lt;/li&gt;
	&lt;li&gt;Nova Scotia&lt;/li&gt;
	&lt;li&gt;Nunavut&lt;/li&gt;
	&lt;li&gt;Ontario&lt;/li&gt;
	&lt;li&gt;Prince Edward Island&lt;/li&gt;
	&lt;li&gt;Quebec&lt;/li&gt;
	&lt;li&gt;Saskatchewan&lt;/li&gt;
	&lt;li&gt;Yukon&lt;/li&gt;
&lt;/ul&gt;</code></pre>

<h2 id="flt-table">Table filtering</h2>

<table class="wb-filter table">
	<caption>Population of largest municipalities per provinces</caption>
	<thead>
		<tr>
			<th>Municipalities</th>
			<th>Population (2016)</th>
			<th>Population (2011)</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Alberta</th>
		</tr>
		<tr>
			<th>Calgary</th>
			<td>1,239,220</td>
			<td>1,096,833</td>
		</tr>
		<tr>
			<th>Edmonton</th>
			<td>932,546</td>
			<td>812,201</td>
		</tr>
		<tr>
			<th>Red Deer</th>
			<td>100,418</td>
			<td>90,564</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">British Columbia</th>
		</tr>
		<tr>
			<th>Vancouver</th>
			<td>631,486</td>
			<td>603,502</td>
		</tr>
		<tr>
			<th>Surrey</th>
			<td>517,887</td>
			<td>468,251</td>
		</tr>
		<tr>
			<th>Burnaby</th>
			<td>232,755</td>
			<td>233,218</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Manitoba</th>
		</tr>
		<tr>
			<th>Winnipeg</th>
			<td>705,224</td>
			<td>663,617</td>
		</tr>
		<tr>
			<th>Brandon</th>
			<td>48,859</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Springfield</th>
			<td>N/A</td>
			<td>14,069</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">New Brunswick</th>
		</tr>
		<tr>
			<th>Moncton</th>
			<td>71,889</td>
			<td>69,074</td>
		</tr>
		<tr>
			<th>Saint John</th>
			<td>67,575</td>
			<td>70,063</td>
		</tr>
		<tr>
			<th>Fredericton</th>
			<td>58,220</td>
			<td>56,224</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Newfoundland &amp; Labrador</th>
		</tr>
		<tr>
			<th>St. John's</th>
			<td>108,860</td>
			<td>106,172</td>
		</tr>
		<tr>
			<th>Conception Bay South</th>
			<td>26,199</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Mount Pearl</th>
			<td>22,957</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Northwest Territories</th>
		</tr>
		<tr>
			<th>Yellowknife</th>
			<td>19,569</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Hay River</th>
			<td>N/A</td>
			<td>3,606</td>
		</tr>
		<tr>
			<th>Inuvik</th>
			<td>3,140</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Nova Scotia</th>
		</tr>
		<tr>
			<th>Halifax</th>
			<td>403,131</td>
			<td>390,096</td>
		</tr>
		<tr>
			<th>Cape Breton</th>
			<td>94,285</td>
			<td>97,398</td>
		</tr>
		<tr>
			<th>Sydney</th>
			<td>N/A</td>
			<td>31,597</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Nunavut</th>
		</tr>
		<tr>
			<th>Iqaluit</th>
			<td>7,740</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Arviat</th>
			<td>2,657</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Rankin Inlet</th>
			<td>2,842</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Ontario</th>
		</tr>
		<tr>
			<th>Toronto</th>
			<td>2,731,579</td>
			<td>2,615,060</td>
		</tr>
		<tr>
			<th>Ottawa</th>
			<td>934,243</td>
			<td>883,391</td>
		</tr>
		<tr>
			<th>Mississauga</th>
			<td>721,599</td>
			<td>713,443</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Prince Edward Island</th>
		</tr>
		<tr>
			<th>Charlottetown</th>
			<td>N/A</td>
			<td>34,562</td>
		</tr>
		<tr>
			<th>Summerside</th>
			<td>N/A</td>
			<td>14,751</td>
		</tr>
		<tr>
			<th>Stratford</th>
			<td>N/A</td>
			<td>8,574</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Quebec</th>
		</tr>
		<tr>
			<th>Montreal</th>
			<td>1,704,694</td>
			<td>1,649,519</td>
		</tr>
		<tr>
			<th>Quebec City</th>
			<td>531,902</td>
			<td>516,622</td>
		</tr>
		<tr>
			<th>Laval</th>
			<td>422,993</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Saskatchewan</th>
		</tr>
		<tr>
			<th>Saskatoon</th>
			<td>246,376</td>
			<td>222,189</td>
		</tr>
		<tr>
			<th>Regina</th>
			<td>215,106</td>
			<td>193,100</td>
		</tr>
		<tr>
			<th>Prince Albert</th>
			<td>35,926</td>
			<td>N/A</td>
		</tr>
	</tbody>
	<tbody>
		<tr>
			<th scope="rowgroup" class="h4" colspan="3">Yukon</th>
		</tr>
		<tr>
			<th>Whitehorse</th>
			<td>25,085</td>
			<td>N/A</td>
		</tr>
		<tr>
			<th>Dawson City</th>
			<td>1,375</td>
			<td>M/A</td>
		</tr>
		<tr>
			<th>Faro</th>
			<td>344</td>
			<td>N/A</td>
		</tr>
	</tbody>
</table>


<h3>Source code</h3>
<pre><code>&lt;table class=&quot;wb-filter table&quot;&gt;
	&lt;caption&gt;Population of largest municipalities per provinces&lt;/caption&gt;
	&lt;thead&gt;
		&lt;tr&gt;
			&lt;th&gt;Municipalities&lt;/th&gt;
			&lt;th&gt;Population (2016)&lt;/th&gt;
			&lt;th&gt;Population (2011)&lt;/th&gt;
		&lt;/tr&gt;
	&lt;/thead&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th scope=&quot;rowgroup&quot; class=&quot;h4&quot; colspan=&quot;3&quot;&gt;Alberta&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Calgary&lt;/th&gt;
			&lt;td&gt;1,239,220&lt;/td&gt;
			&lt;td&gt;1,096,833&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Edmonton&lt;/th&gt;
			&lt;td&gt;932,546&lt;/td&gt;
			&lt;td&gt;812,201&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Red Deer&lt;/th&gt;
			&lt;td&gt;100,418&lt;/td&gt;
			&lt;td&gt;90,564&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	&lt;tbody&gt;
		&lt;tr&gt;
			&lt;th scope=&quot;rowgroup&quot; class=&quot;h4&quot; colspan=&quot;3&quot;&gt;British Columbia&lt;/th&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Vancouver&lt;/th&gt;
			&lt;td&gt;631,486&lt;/td&gt;
			&lt;td&gt;603,502&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Surrey&lt;/th&gt;
			&lt;td&gt;517,887&lt;/td&gt;
			&lt;td&gt;468,251&lt;/td&gt;
		&lt;/tr&gt;
		&lt;tr&gt;
			&lt;th&gt;Burnaby&lt;/th&gt;
			&lt;td&gt;232,755&lt;/td&gt;
			&lt;td&gt;233,218&lt;/td&gt;
		&lt;/tr&gt;
	&lt;/tbody&gt;
	...
&lt;/table&gt;</code></pre>

<h2 id="flt-search">Applying additional search filters</h2>

<p>The filter plugin has three types of search methods available: exact pattern match (default), AND operator, and OR operator.</p>

<h3>Exact pattern match (default)</h3>

<p>Finds items that contain exactly what the user has specified.</p>

<p>Not setting the <code>filterType</code> will tell the filter plugin to apply the default search pattern which is an exact pattern match to the search terms. Only items that contain the full and exact pattern that the user enters will be shown.</p>

<ul class="wb-filter">
	<li>Alberta</li>
	<li>British Columbia</li>
	<li>Manitoba</li>
	<li>New Brunswick</li>
	<li>Newfoundland &amp; Labrador</li>
	<li>Northwest Territories</li>
	<li>Nova Scotia</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Prince Edward Island</li>
	<li>Quebec</li>
	<li>Saskatchewan</li>
	<li>Yukon</li>
</ul>

<h4>Source code</h4>

<pre><code>&lt;ul class=&quot;wb-filter&quot;&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	...
&lt;/ul&gt;</code></pre>

<h3>AND operator</h3>

<p>Finds items that contain all of the specified words.</p>

<p>Setting the <code>filterType</code> to the <code>and</code> option will tell the filter plugin to apply an AND operator between search terms. Only items that contain all search terms will be shown.</p>

<ul class="wb-filter" data-wb-filter='{ "filterType": "and" }'>
	<li>Alberta</li>
	<li>British Columbia</li>
	<li>Manitoba</li>
	<li>New Brunswick</li>
	<li>Newfoundland &amp; Labrador</li>
	<li>Northwest Territories</li>
	<li>Nova Scotia</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Prince Edward Island</li>
	<li>Quebec</li>
	<li>Saskatchewan</li>
	<li>Yukon</li>
</ul>

<h4>Source code</h4>

<pre><code>&lt;ul class=&quot;wb-filter&quot; data-wb-filter='{ "filterType": "and" }'&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	...
&lt;/ul&gt;</code></pre>

<h3>OR operator</h3>

<p>Finds items that contain at least one of the specified words.</p>

<p>Setting the <code>filterType</code> to the <code>or</code> option will tell the filter plugin to apply an OR operator between search terms. All items that contain any of the supplied search terms will be shown.</p>

<ul class="wb-filter" data-wb-filter='{ "filterType": "or" }'>
	<li>Alberta</li>
	<li>British Columbia</li>
	<li>Manitoba</li>
	<li>New Brunswick</li>
	<li>Newfoundland &amp; Labrador</li>
	<li>Northwest Territories</li>
	<li>Nova Scotia</li>
	<li>Nunavut</li>
	<li>Ontario</li>
	<li>Prince Edward Island</li>
	<li>Quebec</li>
	<li>Saskatchewan</li>
	<li>Yukon</li>
</ul>

<h4>Source code</h4>

<pre><code>&lt;ul class=&quot;wb-filter&quot; data-wb-filter='{ "filterType": "or" }'&gt;
	&lt;li&gt;Alberta&lt;/li&gt;
	...
&lt;/ul&gt;</code></pre>

<h3 id="flt-uicontainer">Move UI to specific container</h3>

<p>Set the <code>source</code> parameter to a jQuery selector that you want to hold the filter's UI. The UI will be added to the top (prepend) of said element.</p>

<div class="row">
	<div class="col-md-4">
		<div id="filterUIContainer"></div>
	</div>
	<div class="col-md-8">
		<ul class="wb-filter" data-wb-filter='{ "source": "#filterUIContainer" }'>
			<li>Alberta</li>
			<li>British Columbia</li>
			<li>Manitoba</li>
			<li>New Brunswick</li>
			<li>Newfoundland &amp; Labrador</li>
			<li>Northwest Territories</li>
			<li>Nova Scotia</li>
			<li>Nunavut</li>
			<li>Ontario</li>
			<li>Prince Edward Island</li>
			<li>Quebec</li>
			<li>Saskatchewan</li>
			<li>Yukon</li>
		</ul>
	</div>
</div>

<h4>Source code</h4>

<pre><code>&lt;div class=&quot;row&quot;&gt;
	&lt;div class=&quot;col-md-4&quot;&gt;
		&lt;div id=&quot;filterUIContainer&quot;&gt;&lt;/div&gt;
	&lt;/div&gt;
	&lt;div class=&quot;col-md-8&quot;&gt;
		&lt;ul class=&quot;wb-filter&quot; data-wb-filter=&apos;{ &quot;source&quot;: &quot;#filterUIContainer&quot; }&apos;&gt;
			&lt;li&gt;Alberta&lt;/li&gt;
			...
		&lt;/ul&gt;
	&lt;/div&gt;
&lt;/div&gt;</code></pre>

<h3 id="flt-customui">Custom UI and Data JSON</h3>
<p>Customize the UI generated by the plugin by adding an element inside the plugin and setting the option <code>uiTemplate</code> to its CSS selector.</p>
<div class="wb-filter" data-wb-filter='{
	"uiTemplate": "#filterTemplate",
	"section": "ul"
}'>
	<div id="filterTemplate">
		<div class="form-group">
			<label for="customSearchUI">Search</label>
			<input type="search" class="form-control" id="customSearchUI">
		</div>
		<p class="wb-fltr-info"><span data-nbitem></span> / <span data-total></span> events</p>
	</div>
	<ul data-wb-json='{
		"url": "../tagfilter/data_en.json#/events",
		"mapping": [
			{ "selector": "li", "value": "/title" }
		]
	}'>
		<template>
			<li></li>
		</template>
	</ul>
</div>

<h4>Source code</h4>
<pre><code>&lt;div class="wb-filter" data-wb-filter='{
	"uiTemplate": "#filterTemplate",
	"section": "ul"
}'>
	&lt;div id="filterTemplate">
		&lt;div class="form-group">
			&lt;label for="customSearchUI">Search&lt;/label>
			&lt;input type="search" class="form-control" id="customSearchUI">
		&lt;/div>
		&lt;p class="wb-fltr-info">&lt;span data-nbitem>&lt;/span> / &lt;span data-total>&lt;/span> events&lt;/p>
	&lt;/div>
	&lt;ul data-wb-json='{
		"url": "../tagfilter/data_en.json#/events",
		"mapping": [
			{ "selector": "li", "value": "/title" }
		]
	}'>
		&lt;template>
			&lt;li>&lt;/li>
		&lt;/template>
	&lt;/ul>
&lt;/div></code></pre>

<h3 id="flt-gcdsCard">GCDS Card</h3>
<gcds-grid columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" class="wb-filter" data-wb-filter='{ "selector": "gcds-card" }'>
	<gcds-card
	card-title="Alberta"
	href="#"
	description="Known for the Rocky Mountains, vast prairies, and oil sands."
	></gcds-card>
	<gcds-card
	card-title="British Columbia"
	href="#"
	description="A coastal province with rainforests, mountains, and vibrant cities like Vancouver."
	></gcds-card>
	<gcds-card
	card-title="Manitoba"
	href="#"
	description="Home to the prairies, polar bears, and the cultural hub of Winnipeg."
	></gcds-card>
	<gcds-card
	card-title="New Brunswick"
	href="#"
	description="A maritime province known for the Bay of Fundy and bilingual heritage."
	></gcds-card>
	<gcds-card
	card-title="Newfoundland &amp; Labrador"
	href="#"
	description="Canada’s easternmost province, rich in history, cliffs, and coastal culture."
	></gcds-card>
	<gcds-card
	card-title="Northwest Territories"
	href="#"
	description="Famous for the Northern Lights, Indigenous cultures, and the Mackenzie River."
	></gcds-card>
	<gcds-card
	card-title="Nova Scotia"
	href="#"
	description="A scenic coastal province known for seafood, lighthouses, and maritime heritage."
	></gcds-card>
	<gcds-card
	card-title="Nunavut"
	href="#"
	description="Canada’s newest and largest territory, home to Inuit communities and Arctic landscapes."
	></gcds-card>
	<gcds-card
	card-title="Ontario"
	href="#"
	description="Canada’s most populous province, home to Toronto, Ottawa, and Niagara Falls."
	></gcds-card>
	<gcds-card
	card-title="Prince Edward Island"
	href="#"
	description="Canada’s smallest province, known for red sand beaches and Anne of Green Gables."
	></gcds-card>
	<gcds-card
	card-title="Quebec"
	href="#"
	description="A French-speaking province with rich culture, historic cities, and vast wilderness."
	></gcds-card>
	<gcds-card
	card-title="Saskatchewan"
	href="#"
	description="Defined by open skies, wheat fields, and a strong farming tradition."
	></gcds-card>
	<gcds-card
	card-title="Yukon"
	href="#"
	description="A rugged northern territory famous for the Klondike Gold Rush and wild landscapes."
	></gcds-card>
</gcds-grid>

<h4>Source code</h4>
<pre><code>&lt;gcds-grid columns="1fr" columns-tablet="1fr 1fr" columns-desktop="1fr 1fr 1fr" class="wb-filter" data-wb-filter='{ "selector": "gcds-card" }'>
	&lt;gcds-card
	card-title="Alberta"
	href="#"
	description="Known for the Rocky Mountains, vast prairies, and oil sands."
	>&lt;/gcds-card>
	&lt;gcds-card
	card-title="British Columbia"
	href="#"
	description="A coastal province with rainforests, mountains, and vibrant cities like Vancouver."
	>&lt;/gcds-card>
	...
&lt;/gcds-grid></code></pre>
